<template>
  <view class="page page-container">
    <!-- 固定筛选区域 -->
    <view class="filter-container">
      <view class="appointment-types">
        <view class="type-tab" 
          :class="{ active: appointmentType === 'medical' }" 
          @click="handleTypeChange('medical')">
          就诊预约
        </view>
        <view class="type-tab" 
          :class="{ active: appointmentType === 'physical' }" 
          @click="handleTypeChange('physical')">
          体检预约
        </view>
      </view>

      <view class="date-range">
        <view class="date-item">
          <uni-datetime-picker
            type="date"
            v-model="startDate"
            @change="handleDateChange"
            :border="false"
            placeholder="开始日期"
            class="date-picker">
          </uni-datetime-picker>
        </view>
        <text class="date-separator">至</text>
        <view class="date-item">
          <uni-datetime-picker
            type="date"
            v-model="endDate"
            @change="handleDateChange"
            :border="false"
            placeholder="结束日期"
            class="date-picker">
          </uni-datetime-picker>
        </view>
      </view>

      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-tabs">
          <button 
            v-for="(item, index) in appointmentType === 'medical' ? medicalStatusFilters : statusFilters"
            :key="index"
            size="mini"
            :class="selectedStatus === item.value ? 'btn-primary' : 'btn-default'"
            @click="handleStatusFilter(item.value)"
            class="filter-btn">
            {{ item.label }}
          </button>
        </view>
      </scroll-view>
    </view>

    <!-- 就诊预约列表 -->
    <view v-if="appointmentType === 'medical'" class="appointment-list">
      <scroll-view 
        class="records-container" 
        scroll-y
        refresher-enabled
        :refresher-triggered="isMedicalRefreshing"
        @refresherrefresh="onMedicalRefresh"
        @refresherrestore="onMedicalRestore">
        <view v-if="medicalOrders.length > 0">
          <view v-for="order in medicalOrders" :key="order.orderId" class="order-card" @click="viewOrderDetail(order)">
            <view class="order-header">
              <text class="doctor-name">{{ order.doctorName }}</text>
              <text class="status" :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
            </view>
            <view class="order-info">
              <view class="info-row">
                <text class="label">就诊科室</text>
                <text class="value">{{ order.deptName }}</text>
              </view>
              <view class="info-row">
                <text class="label">就诊时间</text>
                <text class="value">{{ order.appointmentDate }} {{ order.timeSlot }}</text>
              </view>
              <view class="info-row">
                <text class="label">就诊方式</text>
                <text class="value">{{ order.visitType }}</text>
              </view>
              <view class="info-row">
                <text class="label">订单金额</text>
                <text class="value price">¥{{ order.amount }}</text>
              </view>
            </view>
            <view class="order-footer">
              <text class="order-no">订单号：{{ order.orderNo }}</text>
              <text class="create-time">{{ formatDate(order.createTime) }}</text>
            </view>
          </view>
        </view>
        <view v-else class="empty-state">
          <uni-icons type="info" size="64" color="#999"></uni-icons>
          <text>暂无预约记录</text>
        </view>
      </scroll-view>
    </view>

    <!-- 体检预约部分保持不变 -->
    <view v-else>
      <!-- 预约记录列表 -->
      <scroll-view 
        class="records-container" 
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore">
        <view 
          v-for="(record, index) in filteredRecords" 
          :key="index" 
          class="record-card"
          @click="showDetail(record)">
          <view class="doctor-info">
            <image class="doctor-avatar" :src="record.doctor_avatar" mode="aspectFill" />
            <view class="info-content">
              <view class="name-dept">
                <text class="doctor-name">{{ record.doctor_name }}</text>
                <text class="department">{{ record.department }}</text>
              </view>
              <view class="appointment-info">
                <text class="time">{{ record.display_time }}</text>
                <view :class="['status-tag', `status-${record.status}`]">
                  {{ record.status_text }}
                </view>
              </view>
            </view>
          </view>
          <view class="consultation-type">
            <uni-icons 
              :type="record.type === 'video' ? 'videocam' : 'chatbubble'" 
              size="16" 
              color="#666">
            </uni-icons>
            <text class="type-text">{{ record.type === 'video' ? '视频问诊' : '图文问诊' }}</text>
            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 预约详情弹窗 -->
    <uni-popup ref="detailPopup" type="bottom">
      <view class="detail-container">
        <view class="detail-header">
          <text class="header-title">预约详情</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="closeDetail"></uni-icons>
        </view>
        <view class="detail-content" v-if="currentRecord">
          <view class="doctor-detail">
            <image class="detail-avatar" :src="currentRecord.doctor_avatar" mode="aspectFill" />
            <view class="detail-info">
              <text class="detail-name">{{ currentRecord.doctor_name }}</text>
              <text class="detail-title">{{ currentRecord.title }}</text>
              <text class="detail-department">{{ currentRecord.department }}</text>
            </view>
          </view>
          <view class="detail-item">
            <text class="item-label">预约时间</text>
            <text class="item-value">{{ currentRecord.display_time }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">就诊类型</text>
            <text class="item-value">{{ currentRecord.type === 'video' ? '视频问诊' : '图文问诊' }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">问诊费用</text>
            <text class="item-value price">¥{{ currentRecord.price }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">症状描述</text>
            <text class="item-value description">{{ currentRecord.description }}</text>
          </view>
          <view class="detail-buttons">
            <button 
              v-if="currentRecord.status === 'pending'" 
              class="btn-default"
              @click="cancelAppointment">
              取消预约
            </button>
            <button class="btn-primary" @click="reAppointment">再次预约</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { apiBaseUrl, minioBaseUrl } from '../../config/api'

// 声明uni类型
declare const uni: any;

interface Appointment {
  appointment_time: string;
  appointment_type: string;
  price: number;
  description: string;
  id: number;
  doctor_id: number;  // 添加doctor_id字段
  doctor_avatar: string;
  status_text: string;
  doctor_name: string;
  department: string;
  title: string;
  type: string;
  status: string;
  display_time: string;
}

// 订单类型定义
interface OrderInfo {
  orderId: string
  orderNo: string
  doctorName: string
  deptName: string
  appointmentDate: string
  timeSlot: string
  visitType: string
  amount: number
  status: number
  createTime: string
  doctorId: string
  deptSubId: string
  deptSubName: string
}

// 状态和数据
const appointmentType = ref('medical');
const startDate = ref('');
const endDate = ref('');
const selectedStatus = ref('all');
const detailPopup = ref();
const currentRecord = ref();

// 医疗预约状态筛选器
const medicalStatusFilters = [
  { label: '全部', value: 'all' },
  { label: '待支付', value: '0' },
  { label: '已支付', value: '1' },
  { label: '已取消', value: '2' },
  { label: '已完成', value: '3' },
  { label: '退款中', value: '4' },
  { label: '已退款', value: '5' }
];

// 体检预约状态筛选器
const statusFilters = [
  { label: '全部', value: 'all' },
  { label: '待就诊', value: 'pending' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' }
];

// 就诊预约下拉刷新状态
const isMedicalRefreshing = ref(false);

const defaultAvatar = 'https://ai-public.mastergo.com/ai/img_res/836304e57dce798d0135cbcb5f642f92.jpg';

// 原始数据
const originalRecords = ref<Appointment[]>([]);

// 筛选后的数据（使用计算属性）
const filteredRecords = computed(() => {
  let result = [...originalRecords.value];
  
  // 类型筛选
  result = result.filter(record => record.appointment_type === appointmentType.value);
  
  // 状态筛选
  if (selectedStatus.value !== 'all') {
    result = result.filter(record => record.status === selectedStatus.value);
  }
  
  // 日期范围筛选
  if (startDate.value && endDate.value) {
    const start = new Date(startDate.value);
    start.setHours(0, 0, 0, 0);
    
    const end = new Date(endDate.value);
    end.setHours(23, 59, 59, 999);
    
    console.log('筛选日期范围:', {
      start: start.toISOString(),
      end: end.toISOString()
    });
    
    result = result.filter(record => {
      // 使用原始的appointment_time进行比较
      const recordDate = new Date(record.appointment_time);
      console.log('记录日期:', {
        record: record.appointment_time,
        date: recordDate.toISOString()
      });
      return recordDate >= start && recordDate <= end;
    });
  }
  
  return result;
});

// 下拉刷新状态
const isRefreshing = ref(false);

// 下拉刷新方法
const onRefresh = async () => {
  isRefreshing.value = true;
  await getAppointmentRecords();
  isRefreshing.value = false;
};

const onRestore = () => {
  console.log('刷新复位');
};

// 获取预约记录
const getAppointmentRecords = async () => {
  try {
    if (!isRefreshing.value) {
      uni.showLoading({
        title: '加载中...'
      });
    }
    
    const [err, res] = await uni.request({
      url: `${apiBaseUrl}/doctor/appointments/selectAll`,
      method: 'GET'
    }).then(res => [null, res]).catch(err => [err, null]);

    if (err) {
      throw new Error('网络请求失败');
    }

    const { code, result } = res.data as { code: number; result: Appointment[] };
    if (code === 200 && result) {
      // 保存原始时间戳，只格式化显示时间
      originalRecords.value = result.map(item => {
        const originalTime = item.appointment_time; // 保存原始时间戳
        const displayTime = new Date(item.appointment_time).toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        }).replace(/\//g, '-');
        
        return {
          ...item,
          doctor_avatar: item.doctor_avatar || defaultAvatar,
          appointment_time: originalTime, // 使用原始时间戳
          display_time: displayTime // 添加用于显示的格式化时间
        };
      });
      
      console.log('加载的数据:', originalRecords.value);
    } else {
      uni.showToast({
        title: '获取预约记录失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求错误:', error);
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 页面加载时获取数据
onMounted(() => {
  getAppointmentRecords();
});

// 方法定义
const handleStatusFilter = (value: string) => {
  selectedStatus.value = value;
  
  // 如果是就诊预约类型，则需要重新获取数据
  if (appointmentType.value === 'medical') {
    getMedicalOrders();
  }
};

const handleTypeChange = (type: string) => {
  appointmentType.value = type;
  // 切换类型时重置状态筛选
  selectedStatus.value = 'all';
};

const handleDateChange = () => {
  console.log('日期变化:', { 
    startDate: startDate.value, 
    endDate: endDate.value 
  });
  
  // 验证日期范围
  if (startDate.value && endDate.value) {
    const start = new Date(startDate.value);
    const end = new Date(endDate.value);
    
    // 检查结束日期是否小于开始日期
    if (end < start) {
      uni.showToast({
        title: '结束日期不能早于开始日期',
        icon: 'none'
      });
      // 重置结束日期
      setTimeout(() => {
        endDate.value = '';
      }, 100);
      return;
    }
  }
  
  // 如果是就诊预约类型且日期都已选择，则重新获取数据
  if (appointmentType.value === 'medical' && startDate.value && endDate.value) {
    getMedicalOrders();
  }
};

const showDetail = (record: Appointment) => {
  currentRecord.value = record;
  detailPopup.value.open();
};

const closeDetail = () => {
  detailPopup.value.close();
};

// 取消预约
const cancelAppointment = async () => {
  if (!currentRecord.value) return;
  
  try {
    uni.showLoading({ title: '取消中...' });
    
    const [err, res] = await uni.request({
      url: `${apiBaseUrl}/doctor/appointments/cancel?id=${currentRecord.value.id}`,
      method: 'POST',
    }).then(res => [null, res]).catch(err => [err, null]);

    if (err) throw new Error('网络请求失败');

    const { code, msg } = res.data as { code: number; msg: string };
    if (code === 200) {
      uni.showToast({
        title: '取消成功',
        icon: 'success'
      });
      
      // 更新本地数据状态
      const record = originalRecords.value.find(r => r.id === currentRecord.value.id);
      if (record) {
        record.status = 'cancelled';
        record.status_text = '已取消';
      }
      
      // 关闭弹窗
      closeDetail();
      
      // 刷新列表
      await getAppointmentRecords();
    } else {
      uni.showToast({
        title: msg || '取消失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('取消预约失败:', error);
    uni.showToast({
      title: '取消失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

const reAppointment = () => {
  if (!currentRecord.value) return;
  
  // 跳转到预约页面，带上医生信息
  uni.navigateTo({
    url: `/pages/doctor/appointment?doctorId=${currentRecord.value.doctor_id}&type=${currentRecord.value.type}`
  });
  
  // 关闭当前弹窗
  closeDetail();
};

// 就诊预约订单列表
const medicalOrders = ref<OrderInfo[]>([]);

// 时间段列表
const timeSlots = [
  '08:00~08:30', '08:30~09:00', '09:00~09:30', '09:30~10:00',
  '10:00~10:30', '10:30~11:00', '11:00~11:30', '11:30~12:00',
  '13:00~13:30', '13:30~14:00', '14:00~14:30', '14:30~15:00',
  '15:00~15:30', '15:30~16:00', '16:00~16:30'
];

// 将数字时间段转换为具体时间描述
const getTimeSlotText = (timeSlotIndex) => {
  // 检查是否为数字
  if (typeof timeSlotIndex === 'number' || !isNaN(Number(timeSlotIndex))) {
    const index = Number(timeSlotIndex);
    // 检查是否在合法范围内
    if (index >= 0 && index < timeSlots.length) {
      return timeSlots[index];
    }
  }
  // 如果已经是时间段文本或无法转换，则直接返回
  return timeSlotIndex;
};

// 获取就诊预约订单列表
const getMedicalOrders = async () => {
  try {
    if (!isMedicalRefreshing.value) {
      uni.showLoading({
        title: '加载中'
      });
    }
    
    // 从Storage中获取patientId
    const patientId = uni.getStorageSync('id');
    if (!patientId) {
      throw new Error('未找到患者ID，请先登录!');
    }
    
    // 构建请求参数
    const requestData: any = {
      patientId
    };
    
    const res = await uni.request({
      url: apiBaseUrl + '/patient/appointment/order/list',
      method: 'POST',
      data: requestData
    });
    
    uni.hideLoading();
    
    if (res.statusCode === 200 && res.data.code === 200) {
      // 处理返回的数据
      const allOrders = res.data.rows.map(order => {
        // 打印原始数据进行检查
        console.log('原始订单数据:', order);
        
        // 转换时间段为具体描述
        const formattedTimeSlot = getTimeSlotText(order.timeSlot);
        
        return {
          orderId: order.orderId,
          orderNo: order.orderNo,
          doctorName: order.doctorName,
          deptName: order.deptName,
          appointmentDate: order.appointmentDate,
          timeSlot: formattedTimeSlot, // 使用格式化后的时间段
          visitType: order.visitType,
          amount: order.amount,
          status: order.status,
          createTime: order.createTime,
          doctorId: order.doctorId, 
          deptSubId: order.deptSubId,
          deptSubName: order.deptSubName
        };
      });
      
      // 应用筛选条件
      let filteredOrders = [...allOrders];
      
      // 状态筛选
      if (selectedStatus.value !== 'all') {
        filteredOrders = filteredOrders.filter(order => order.status.toString() === selectedStatus.value);
      }
      
      // 日期范围筛选
      if (startDate.value && endDate.value) {
        const start = new Date(startDate.value);
        start.setHours(0, 0, 0, 0);
        
        const end = new Date(endDate.value);
        end.setHours(23, 59, 59, 999);
        
        filteredOrders = filteredOrders.filter(order => {
          // 从appointmentDate中提取日期部分进行比较
          const appointmentDateObj = new Date(order.appointmentDate);
          return appointmentDateObj >= start && appointmentDateObj <= end;
        });
      }
      
      // 按createTime降序排序（最新的在前面）
      filteredOrders.sort((a, b) => {
        const dateA = new Date(a.createTime);
        const dateB = new Date(b.createTime);
        return dateB.getTime() - dateA.getTime();
      });
      
      // 更新筛选后的数据
      medicalOrders.value = filteredOrders;
      
      // 打印处理后的数据进行检查
      console.log('处理后的订单列表数据:', medicalOrders.value);
    } else {
      uni.showToast({
        title: res.data.msg || '获取订单列表失败',
        icon: 'none'
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: error.message || '获取订单列表失败',
      icon: 'none'
    });
  }
};

// 查看订单详情
const viewOrderDetail = (order) => {
  // 打印订单信息进行检查
  console.log('点击的订单信息:', order);
  
  if (!order.doctorId) {
    uni.showToast({
      title: '医生信息不完整',
      icon: 'none'
    });
    return;
  }
  
  if (!order.deptSubId) {
    uni.showToast({
      title: '科室信息不完整',
      icon: 'none'
    });
    return;
  }
  
  uni.navigateTo({
    url: `/pages/index/orders/detail?orderId=${order.orderId}&fromCreate=false&doctorId=${order.doctorId}&deptSubId=${order.deptSubId}&deptSubName=${order.deptSubName}`
  });
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消',
    3: '已完成',
    4: '退款中',
    5: '已退款'
  };
  return statusMap[status] || '未知状态';
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-paid',
    2: 'status-cancelled',
    3: 'status-completed',
    4: 'status-refunding',
    5: 'status-refunded'
  };
  return classMap[status] || '';
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 页面加载时获取订单列表
onMounted(() => {
  getMedicalOrders();
});

// 就诊预约下拉刷新方法
const onMedicalRefresh = async () => {
  isMedicalRefreshing.value = true;
  await getMedicalOrders();
  
  // 延迟关闭刷新状态，给用户一个明显的反馈
  setTimeout(() => {
    isMedicalRefreshing.value = false;
  }, 500);
};

const onMedicalRestore = () => {
  console.log('就诊预约刷新复位');
};
</script>

<style lang="scss">
page {
  height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f9fd;
}

.page-container {
  padding-top: 73px; /* 增加padding-top，使内容位于胶囊按钮下方 */
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.filter-container {
  background-color: #ffffff;
  padding: 32rpx 24rpx;
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.appointment-types {
  display: flex;
  justify-content: center;
  margin-bottom: 28rpx;
}

.type-tab {
  padding: 16rpx 40rpx;
  font-size: 16px;
  color: #666666;
  position: relative;
  transition: all 0.3s;

  &.active {
    color: #1890ff;
    font-weight: 500;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 4rpx;
      background-color: #1890ff;
      border-radius: 2rpx;
    }
  }
}

.date-range {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 20rpx;
}

.date-item {
  flex: 1;
}

.date-separator {
  padding: 0 20rpx;
  color: #999;
}

.filter-scroll {
  white-space: nowrap;
}

.filter-tabs {
  display: inline-flex;
  padding: 0 20rpx;
}

.filter-btn {
  margin-right: 20rpx;
  min-width: 160rpx;
  font-size: 28rpx;
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  
  &:last-child {
    margin-right: 0;
  }

  &.btn-primary {
    background-color: #1890ff;
    color: #ffffff;
    border: none;
  }

  &.btn-default {
    background-color: #f5f5f5;
    color: #666666;
    border: 1px solid #d9d9d9;
  }
}

.records-container {
  flex: 1;
  padding: 24rpx;
  height: calc(100vh - 300rpx); /* 设置固定高度，减去筛选区域和其他元素的高度 */
  box-sizing: border-box;
}

.record-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.doctor-info {
  display: flex;
  margin-bottom: 20rpx;
}

.doctor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.info-content {
  flex: 1;
}

.name-dept {
  margin-bottom: 12rpx;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-right: 16rpx;
}

.department {
  font-size: 28rpx;
  color: #666;
}

.appointment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  font-size: 28rpx;
  color: #666;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
}

.status-pending {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-cancelled {
  background-color: #fff1f0;
  color: #f5222d;
}

.consultation-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
  margin-top: 20rpx;
}

.type-text {
  flex: 1;
  margin-left: 12rpx;
  font-size: 28rpx;
  color: #666;
}

.detail-container {
  background-color: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
}

.doctor-detail {
  display: flex;
  margin-bottom: 32rpx;
}

.detail-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

.detail-info {
  flex: 1;
}

.detail-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.detail-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.detail-department {
  font-size: 28rpx;
  color: #999;
}

.detail-item {
  display: flex;
  margin-bottom: 24rpx;
}

.item-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #666;
}

.item-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;

  &.price {
    color: #f5222d;
  }

  &.description {
    color: #666;
  }
}

.detail-buttons {
  display: flex;
  gap: 24rpx;
  margin-top: 40rpx;

  button {
    flex: 1;
    font-size: 32rpx;
    padding: 20rpx;
    border-radius: 44rpx;

    &.btn-primary {
      background-color: #1890ff;
      color: #ffffff;
      border: none;
    }

    &.btn-default {
      background-color: #f5f5f5;
      color: #666666;
      border: 1px solid #d9d9d9;
    }
  }
}

.btn-primary {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
}

.btn-default {
  background-color: #f5f5f5;
  color: #666666;
  border: 1px solid #d9d9d9;
}

.appointment-list {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(100vh - 300rpx); /* 设置固定高度，与records-container保持一致 */
  box-sizing: border-box;
}

.order-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.status {
  font-size: 28rpx;
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
}

.status-pending {
  color: #ff9800;
  background: #fff4e5;
}

.status-paid {
  color: #2979ff;
  background: #e8f1ff;
}

.status-cancelled {
  color: #999;
  background: #f5f5f5;
}

.status-completed {
  color: #52c41a;
  background: #f6ffed;
}

.status-refunding {
  color: #fa8c16;
  background: #fff7e6;
}

.status-refunded {
  color: #722ed1;
  background: #f9f0ff;
}

.order-info {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.label {
  color: #666;
}

.value {
  color: #333;
  font-weight: 500;
}

.price {
  color: #f56c6c;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  padding-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.empty-state uni-icons {
  margin-bottom: 20rpx;
}
</style>
  